<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Action extends React.Component {

            state = { newArr: ['新闻'] }

            componentDidMount() {

                // 定时调用
                setInterval(() => {
                    const { newArr } = this.state
                    const news = '新闻'
                    this.setState({ newArr: [news, ...newArr] })

                }, 1000)
            }



            render() {

                return (


                    this.state.newArr.map((n, index) => {
                        return <h1 key={index} className="news">{n}</h1>
                    })


                )

            }
        }
        ReactDOM.render(<Action/>,document.getElementById('test'))



    </script>
</body>

</html>